<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>赛事列表</title>
    <!--2 引入element ui css样式-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <!--页面内容区域-->
    <el-card>
        <div slot="header" class="clearfix">
            <span>赛事列表</span>

        </div>
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    type="index"
                    prop=""
                    label=""
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="matchName"
                    label="项目名称"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="matchStute"
                    label="比赛状态"
                    align="center"
                    width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.matchStute == '0'" >未开始</span>
                    <span v-if="scope.row.matchStute == '1'" >比赛中</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="matchNumber"
                    label="比赛人数"
                    align="center"
                    width="120">
            </el-table-column>

        </el-table>

    </el-card>
</div>

<!--1 引入js库 要锁定版本-->
<!--1.1 引入vue-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<!--1.3 引入 axios-->
<script src="https://unpkg.com/axios@0.26.1/dist/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>
<script>
    //4 创建vue实例
    const app = new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
                //控制对话框
                dialog: {
                    title: '',
                    show: false
                },
                dialogEdit: {
                    title: '',
                    show: false
                },
                //定义模型，与表单匹配
                mymodel: {
                    matchId: '',
                    matchName: '',
                    matchNumber:'',
                    matchStute: '0'
                },
                //设置一个变量，保存哪行数据被选中了
                selectItemIndex: -1
            }
        },
        mounted: function () {
            //初始化表格
            this.initTable();
        },
        methods: {
            //初始化表格
            initTable: function () {
                //通过axios调用服务器json服务
                axios.get("/matchList/").then(res => {
                    this.tableData = res.data;
                });
            },

            //响应添加按钮
            onAdd: function () {
                //清空表单
                this.mymodel = {
                    matchId: '',
                    matchName: '',
                    matchNumber:'',
                    matchStute: '0'
                };

                //alert("注册用户");
                this.dialog.title = "添加项目";
                this.dialog.show = true;
            },
            //响应添加项目对话框 保存按钮
            onSubmitAdd: function (form) {
                //把表单数据提交到 后台 ，保存到数据库
                //添加,调用post方法
                axios.post("/matchList/", this.mymodel).then(res => {
                    // 操作成功
                    this.$message({
                        message: "保存成功！",
                        type: "success"
                    });
                    //方法1:更新table
                    this.tableData.push(res.data);
                    //方法2:更新table:在最后添加一个元素,0表示添加
                    //this.tableData.splice(this.tableData.length,0,res.data);
                    //方法3 重新加载
                    //this.initTable();

                    //关闭对话框
                    this.dialog.show = false;

                });
            },
            //响应修改按钮
            onEdit: function (index) {
                //进行数据回填---通过选中的index获得tableData里面的数据
                this.mymodel = {
                    matchId: this.tableData[index].matchId,
                    matchName: this.tableData[index].matchName,
                    matchNumber:this.tableData[index].matchNumber,
                    matchStute: this.tableData[index].matchStute
                };

                //保存被选中的行 索引值
                this.selectItemIndex = index;

                //设置对话框可见
                this.dialogEdit.title = '修改项目信息';
                this.dialogEdit.show = true;

            },
            //响应修改对话框 保存按钮
            onSubmitEdit: function (form) {
                //保存到数据库
                axios.put("/matchList/", this.mymodel).then(res => {
                    // 操作成功
                    this.$message({
                        message: "保存成功！",
                        type: "success"
                    });

                    // 方法1:更新指定索引的元素
                    //this.tableData.splice(this.selectItemIndex, 1, res.data);
                    // 方法2:数据重新从服务器加载table数据,这种方法效率差
                    this.initTable();
                    // 关闭对话框
                    this.dialogEdit.show = false;
                })
            },
            //响应删除按钮
            onDelete: function (index) {
                //删除被选中的数据
                this.$confirm('确认删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除
                    let id = this.tableData[index].matchId;
                    axios.delete("/matchList/" + id).then(res => {
                        if (res.data == 200) {
                            this.$message("删除成功");
                            // 删除table起始下标为1，长度为1的一个值
                            this.tableData.splice(index, 1);
                        }
                    });
                }).catch(() => {

                });

            }
        }
    });

</script>
</body>
</html>